<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM2-获取元素2</title>
</head>
<body>
    <div id="app">
        <div class="demo1">hello</div>
        <div class="demo1">world</div>
        <p class="demo1">你好世界</p>
    </div>
    <div id="box">
        <div name="test">test1</div>
        <div name="test">test2</div>
    </div>
    <script>
        // querySelector(),对标签选择器，类选择器，id选择器做了统一的封装
        // querySelector()方法，返回获取的第一个元素
        // querySelectorAll()方法，返回获取的所有元素
        let app = document.querySelector("#app")
        console.log(app);
        let demo1 = document.querySelector(".demo1")
        console.log(demo1);
        let demos = document.querySelectorAll(".demo1")
        console.log(demos);
        let div = document.querySelector("div")
        console.log(div);
        let divs = document.querySelectorAll("div")
        console.log(divs);
        // 注意：可以写层次选择器
        let p = document.querySelector("#app p");
        console.log(p);
        // 注意：获取所有name属性为"test"的元素
        let tests = document.querySelectorAll("[name='test']")
        console.log(tests);
    </script>
</body>
</html>